<template>
    <div>
        <!-- 三级分类下拉框 -->
        <el-card class="box-card" style="margin: 20px 0">
            <!-- 绑定自定义事件，用于接收子组件传过来的三个商品id  用props给父组件传递数据 -->
            <CategorySelect @getCategoryId="getCategoryId" :show="scene!=0"/>
        </el-card>
        <!-- 底部将来是有三部分进行切换 -->
        <el-card class="box-card">
            <!-- 展示spu列表数据 -->
            <div v-show="scene==0">
                <el-button type="primary" icon="el-icon-plus" style="margin-bottom: 10px" @click="addSpu"
                           :disabled="!category3Id">添加SPU
                </el-button>
                <!-- 表格 -->
                <el-table style="width: 100%" border :data="records">
                    <el-table-column type="index" label="序号" width="80" align="center">
                    </el-table-column>

                    <el-table-column prop="spuName" label="spu名称" width="180">
                    </el-table-column>

                    <el-table-column prop="description" label="spu描述">
                    </el-table-column>

                    <el-table-column prop="address" label="操作" width="250">
                        <template slot-scope="{row,$index}">
                            <div class="bottom">
                                <el-tooltip class="item" effect="dark" content="添加Sku" placement="bottom-end">
                                    <el-button type="success" icon="el-icon-plus" size="mini" @click="addSku(row)"></el-button>
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" content="编辑Spu" placement="bottom">
                                    <el-button type="warning" icon="el-icon-edit" size="mini"
                                               @click="updateSpu(row)"></el-button>
                                </el-tooltip>

                                <el-tooltip class="item" effect="dark" content="查看当前Spu全部Sku列表" placement="bottom">
                                    <el-button type="info" icon="el-icon-info" size="mini" @click="getSkuList(row)"></el-button>
                                </el-tooltip>

                                <el-tooltip class="item" effect="dark" content="删除Spu" placement="bottom-start">
                                    <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="deleteSpu(row)">
                                        <el-button type="danger" icon="el-icon-delete" size="mini" slot="reference"></el-button>
                                    </el-popconfirm>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页器 -->
                <!--    当前第几页:current-page=""、数据总条数:total=""、每一页展示数据:page-size=""
                :page-sizes代表可以设置每一页展示多少条数据
                background:属性可以为分页按钮添加背景色
                :pager-count="" 按钮的数量，如果是7，连续页码数是5
                layout:表示需要显示的内容（实现分页器的布局）    prev:表示上一页      pager:表示页码列表      next:为下一页   -->
                <el-pagination
                    style="margin-top: 20px;text-align: center"
                    background
                    :current-page="page"
                    :page-sizes="[3,10,20]"
                    :page-size="limit"
                    :total="total"
                    layout="prev, pager, next, jumper,->,sizes,total "
                    @current-change="getSpuList"
                    @size-change="handleSizeChange"
                >
                </el-pagination>
            </div>
            <!-- 展示添加spu或者修改spu-->
            <SpuForm v-show="scene==1" @changeSpuFormScene="changeSpuFormScene" ref="Spu"/>
            <!-- 展示添加sku -->
            <SkuForm v-show="scene==2" @changeSkuFormScene="changeSkuFormScene" ref="Sku"/>
        </el-card>
        <!-- 查看Sku列表数据对话框 -->
        <el-dialog :title="`${spu.spuName}的sku列表`" :visible.sync="dialogTableVisible" :before-close="close">
            <el-table :data="skuList" border v-loading="loading">
                <el-table-column property="skuName" label="名称" width="220px"></el-table-column>
                <el-table-column property="price" label="价格" ></el-table-column>
                <el-table-column property="weight" label="重量"></el-table-column>
                <el-table-column  label="默认图片">
                    <template slot-scope="{row,$index}">
                        <img :src="row.skuDefaultImg" alt="" style="width: 100px;height: 100px">
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

    </div>
</template>

<script>
// 引入子组件
import SpuForm from "@/views/product/Spu/SpuForm/SpuForm";
import SkuForm from "@/views/product/Spu/SkuForm/SkuForm";

export default {
    name: "Spu",
    data() {
        return {
            // 分页器，显示第几页，默认在第1页
            page: 1,
            // 每页展示的数据
            limit: 3,
            // 一级分类、二级分类、三级分类的id
            category1Id: '',
            category2Id: '',
            category3Id: '',
            // Spu列表展示的数据（服务器返回的）
            records: [],
            // 数据总条数（服务器返回的）
            total: 0,
            // 场景，0代表展示spu列表数据、  1代表展示添加spu或者修改spu、  2代表添加sku
            scene: 0,
            // dialog对话框显示与隐藏
            dialogTableVisible: false,
            // 页面加载  loading加载
            loading: true,
            // 保存传过来的row
            spu:{},
            // 保存服务器返回的数据   sku列表数据
            skuList:[],
        }
    },
    components: {SpuForm, SkuForm},
    methods: {
        // 用于接收子组件传过来的三个商品id
        getCategoryId({categoryId, level}) {
            // console.log(categoryId,level)
            // 区分 三级分类 相应的id，以及父组件进行存储
            if (level == 1) {
                this.category1Id = categoryId
                // 一级分类的商品id发生变化时，清空二级和三级分类的id
                this.category2Id = ''
                this.category3Id = ''
            } else if (level == 2) {
                this.category2Id = categoryId
                // 二级分类的商品id发生变化时，清空三级分类的id
                this.category3Id = ''
            } else {
                // 走到这里，代表三个级别分类里面都有数据了，就可以发请求了
                this.category3Id = categoryId
                // 发请求      // 先放着，回头在写
                this.getSpuList()
            }
        },
        // 获取 Spu 列表数据
        async getSpuList(pager = 1) {
            // 点击哪一页就跳到哪一页
            this.page = pager
            // 解构
            const {page, limit, category3Id} = this
            let gResult = await this.$API.spu.reqSpuList(page, limit, category3Id)
            // console.log(gResult)
            if (gResult.code == 200) {
                // 保存数据，把服务器返回的数据保存到组件身上
                this.records = gResult.data.records
                this.total = gResult.data.total
            } else {
                this.$message.error('获取Spu列表数据失败！')
            }
        },
        // 当某一页数据展示数量发生变化时会调用
        handleSizeChange(limitt) {
            // console.log(limitt)     // 选中多少，就会打印多少
            this.limit = limitt
            this.getSpuList()
        },
        // 点击哪一页就跳到哪一页
        /*handleCurrentChange(pager) {
            console.log(pager)   // 点分页器的几就打印几
            this.page = pager
            this.getSpuList()
        }*/
        // 添加Spu
        addSpu() {
            // 展示添加Spu或者修改Spu的页面
            this.scene = 1
            // 点击添加Spu按钮，通知子组件发请求 ----- 发两个：品牌、销售属性     把第三级分类的id传过去
            this.$refs.Spu.addSpuData(this.category3Id)
        },
        // 修改Spu
        updateSpu(row) {
            // 展示添加Spu或者修改Spu的页面
            this.scene = 1
            // 通过给子组件身上打ref，获取子组件 SpuForm
            // console.log(this.$refs.Spu)
            // 获取子组件 SpuForm 身上的方法，把选中的某一条数据传过去
            this.$refs.Spu.getSpuData(row)
        },
        // SpuForm 取消按钮 ， 自定义事件，接收子组件传过来的0
        changeSpuFormScene({scene, flag}) {
            // console.log(scene)
            // console.log(flag)
            this.scene = scene
            // 收到子组件传过来的0后，重新获取数据   , 获取完数据，停留在当前页
            // this.getSpuList(this.page)
            // flag 是为了区分保存的是新增的数据还是修改的数据,如果是修改，保存完毕后停留当前页；如果是新增，保存完毕后跳转到第一页
            if (flag === '修改') {
                this.getSpuList(this.page)
            } else {
                this.getSpuList()
            }
        },
        // 删除Spu
        async deleteSpu(row) {
            // row 是选中的那条数据
            // console.log(row)
            let rDSResult = await this.$API.spu.reqDeleteSpu(row.id)
            // console.log(rDSResult)
            if (rDSResult.code == 200) {
                this.$message.success('删除成功！')
            } else {
                this.$message.error('删除失败')
                return
            }
            // 再次获取数据   如果列表中的个数大于1，删除的时候停留在当前页，如果spu个数小于1，就回到上一页
            this.getSpuList(this.records.length > 1 ? this.page : this.page-1)
        },

        // 添加Sku
        addSku(row) {
            // 展示添加Sku或者修改Sku的页面
            this.scene = 2
            // 点击添加Sku按钮，通知子组件SkuForm发请求 ---- 发三个请求：获取图片、获取销售属性、获取平台属性
            this.$refs.Sku.getSkuDate(this.category1Id,this.category2Id,row)
        },
        // SkuForm 取消按钮
        changeSkuFormScene(scene) {
            // console.log(scene)
            this.scene = scene
        },
        // 点击查看Sku列表数据，获取Sku列表
        async getSkuList(row) {
            // 点击弹出对话框
            this.dialogTableVisible = true
            // 保存获取到的数据
            this.spu = row
            // 发请求
            let rSLResult = await this.$API.spu.reqSkuList(this.spu.id)
            // console.log(rSLResult)
            if (rSLResult.code == 200) {
                // 保存服务器返回的数据
                this.skuList = rSLResult.data
                // 隐藏loading
                this.loading = false
            }
        },
        // 对话框关闭前的回调
        close(done ) {
            // 开启loading
            this.loading = true
            // 清空数据
            this.skuList = []
            // 关闭对话框
            done()
        }
    }
}
</script>

<style scoped>
.box {
    width: 400px;
}

.bottom {
    clear: both;
    text-align: center;
}

.item {
    margin: 4px;
}


</style>
